<template>
  <div>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
    <i :class="'el-icon-'+item.icon"></i>
    <span slot="title" style="color: hsl(227, 31%, 65%);">{{item.label}}</span>
  </el-menu-item>
  <el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
    <template slot="title">
      <i :class="'el-icon-'+item.icon"></i>
      <span slot="title" style="color: hsl(227, 31%, 65%);">{{item.label}}</span>
    </template>
    <el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path">
      <el-menu-item @click="clickMenu(subItem)" :index="subIndex">
        <i :class="'el-icon-'+subItem.icon"></i>
        <span style="color: hsl(227, 31%, 65%);">{{subItem.label}}</span>
        </el-menu-item>
    </el-menu-item-group>
  </el-submenu>
</el-menu>
  </div>
</template>

<style lang="less">
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: auto;
    background-color: #fff;
    overflow: hidden;
    min-width: 200px;
  }
</style>

<script>
  export default {
    data() {
      return {
        menu: [
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
        },
        {
          path: "/learn",
          name: "learn",
          label: "个人学习",
          icon: "document",
          children: [
            {
              path: "/learn1",
              name: "learn1",
              label: "打包上传基于vue2项目到gitee上",
              icon: "collection-tag",
              url: "Learn/PageOne",
            },
            {
              path: "/learn2",
              name: "learn2",
              label: "本网站项目的设计实现过程",
              icon: "collection-tag",
              url: "Learn/PageTwo",
            },
            {
              path: "/learn3",
              name: "learn3",
              label: "项目一些功能的实现代码",
              icon: "collection-tag",
              url: "Learn/PageThree",
            },
            {
              path: "/learn4",
              name: "learn4",
              label: "功能未实现与解决之路",
              icon: "collection-tag",
              url: "Learn/PageFour",
            },
            {
              path: "/learn5",
              name: "learn5",
              label: "vuex的安装与使用篇",
              icon: "collection-tag",
              url: "Learn/PageFive",
            },
            {
              path: "/learn6",
              name: "learn6",
              label: "axios的安装与使用",
              icon: "collection-tag",
              url: "Learn/PageSix",
            },
          ],
        },
        {
          path: "/introduce",
          name: "introduce",
          label: "站长介绍",
          icon: "user",
          url: "Introduce/Introduce",
        },
        {
          path: "/link",
          name: "link",
          label: "链接收藏篇",
          icon: "paperclip",
          url: "Link/Link",
        },
        {
          path: "/diary",
          name: "diary",
          label: "个人日记",
          icon: "notebook-1",
          url: "diary/diary",
        },
        {
          path: "/other",
          name: "other",
          label: "其他",
          icon: "more",
          url: "other/other",
          children: [
            {
          path: "/other1",
          name: "other1",
          label: "后台管理项目首页练习",
          icon: "finished",
          url: "other1/other1",
        },
            {
          path: "/other2",
          name: "other2",
          label: "后台管理项目登录页练习",
          icon: "finished",
          url: "other2/other2",
        },
          ]
        },
        
      ],
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      clickMenu(item) {
      //定义clickMenu函数
      this.$router.push({
        //引入router用push方法进行页面的跳转
        name: item.name, //传入对象，通过name跳转
      });
    },
    },
    computed: {
    //使用计算属性将数据分为有子菜单和无子菜单
    noChildren() {
      //用filter方法传入一个item函数拿到其中每一项进行过滤(对数据源进行过滤)
      return this.menu.filter((item) => !item.children); //判断若是没有子项目就返回
    },
    hasChildren() {
      return this.menu.filter((item) => item.children);
    },
    isCollapse(){ //这个isCollapse是这起的名字
      return this.$store.state.tab.isCollapse //这个isCollapse是在tab.js文件里定义好的属性
    }
  },
  }
</script>